<template>
  <el-card shadow="always" >
    <!-- 采购开单行 -->
    <div class="titleLevel1" style="margin-left: 5px;">采购开单</div>
    <div style="display: flex; flex-direction: column;flex-wrap: nowrap;margin-left: 20px;">
      <div style="margin-bottom: 20px;white-space: nowrap;">
        <span class="spanLevel1" >采购编号:</span>
        <el-input
            v-model="input1"
            style="width: 240px"
            placeholder="采购编号"
        />
        <span class="spanLevel1" style="margin-left:35px;">供应商户:</span>
        <el-input
            v-model="input1"
            style="width: 240px"
            placeholder="供应商户"
        />
        <span class="spanLevel1" style="margin-left:35px;">采购单据:</span>
        <el-input
            v-model="input2"
            style="width: 240px"
            placeholder="采购单据"

        />

      </div>
      <div style="margin-bottom: 20px;">
        <span class="spanLevel1" >经手人员:</span>
        <el-input
            v-model="input1"
            style="width: 240px"
            placeholder="经手人员"
        />
        <span class="spanLevel1" style="margin-left: 35px;">处理日期:</span>
        <el-input
            v-model="input2"
            style="width: 240px"
            placeholder="处理日期"
        />

      </div>
      <div style="margin-bottom: 20px;">
        <span class="spanLevel1" >采购备注:</span>
        <el-input
            v-model="input1"
            style="width: 240px"
            placeholder="备注"

        />
      </div>
    </div>

    <el-divider border-style="double" />
    <!-- 表格行 --------------------------------------->
    <div class="titleLevel1" style="margin-bottom: 20px;">产品信息</div>
    <div class="button-container">
      <el-button type="primary"  round @click="dialogVisible = true" >
        添加产品</el-button>
      <!--           新增分类-->
      <el-dialog v-model="dialogVisible" :close-on-click-modal="true" custom-class="dialog-class"
                 style="width: 784px;height: 337px;padding: 0px!important;background-color: white;">
        <el-card  shadow="never"
                  style="width: auto;margin-top: -30px;">
          <template #header>
            <span>分类详情</span>
          </template>
          <!-- 新增第一页内容 -->
          <div >
            <!--                  第一行-->
            <el-row :gutter="3" class="page1row">
              <el-col :span="12">
                <el-input v-model="ware.wareName" placeholder="分类名称" >
                  <template #prepend>分类名称</template>
                </el-input></el-col>
              <el-col :span="12"><el-input v-model="ware.wareCode" placeholder="所属分类">
                <template #prepend>所属分类</template>
              </el-input></el-col>
            </el-row>

            <!--                  第三行-->
            <el-row :gutter="3" class="page1row">

              <el-col :span="24"><el-input v-model="ware.wareMark" placeholder="备注信息">
                <template #prepend>备注信息</template>
              </el-input></el-col>
            </el-row>
          </div>
          <span style="display: flex; justify-content: flex-end;">
                  <el-button @click="submitWare">完成</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
                </span>

        </el-card>
      </el-dialog>
      <!--            添加产品结束-->

    </div>
    <!-- 表格组件 -->
    <div class="table-flex">
      <el-table :data="tableData"
                style="height: auto;min-height: 200px;max-height: 300px"
                border
                :row-style="{height:'50px'}"
                :header-row-style="{height:'60px'}"
      >

        <el-table-column label="" width="50px" >
          <template #header>
            <input type="checkbox" v-model="allSelected" @change="handleAllSelect">
          </template>
          <template #default="{row}">
            <input type="checkbox" :value="row.wareId" v-model="selectedRowIds">
          </template>
        </el-table-column>
        <el-table-column prop="wareName" label="商品名称" width="180" align="center"/>
        <el-table-column prop="wareCode" label="商品编号" width="180"  align="center"/>

        <el-table-column prop="wareMark" label="商品规格" width="100"/>
        <el-table-column prop="wareMark" label="商品单位" width="100"/>
        <el-table-column prop="wareMark" label="商品数量" width="180" align="center"/>
        <el-table-column prop="wareMark" label="采购单价" width="180" align="center"/>
        <el-table-column prop="wareMark" label="总金额" width="180" align="center"/>

        <el-table-column>
          <template #default="scope"  >
            <el-button-group>
              <el-button type="success" size="small" @click="edit(scope.row)">修改</el-button>
              <el-button type="danger" size="small" @click="del(scope.$index,scope.row)">删除</el-button>
            </el-button-group>
          </template>


        </el-table-column>
      </el-table>
    </div>
    <!-- 表格右侧空白列 -->
    <!--    底部翻页模块-->
    <div class="demo-pagination-block">
      <div class="demonstration"></div>
      <el-pagination
          v-model:current-page="currentPage2"
          v-model:page-size="pageSize2"
          :page-sizes="[50, 100]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="sizes, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <!--底部翻页模块结束-->
    <el-divider border-style="double" />
<!--    账单信息-->
    <div class="titleLevel1">账单信息</div>
    <div style="display: flex; flex-direction: column;flex-wrap: nowrap;margin-left: 20px;">
      <div style="margin-bottom: 20px;">
        <span class="spanLevel1">其他费用:</span>
        <el-input
            v-model="input1"
            style="width: 240px"
            placeholder="其他费用"
        />
        <span class="spanLevel1" style="margin-left:35px;">总计金额:</span>
        <el-input
            v-model="input2"
            style="width: 240px"
            placeholder="总计金额"
            disabled
        />

      </div>
      <div style="margin-bottom: 20px;">
        <span class="spanLevel1">结算账户:</span>
        <el-input
            v-model="input1"
            style="width: 240px"
            placeholder="结算账户"
        />
        <span class="spanLevel1" style="margin-left: 35px;">实付金额:</span>
        <el-input
            v-model="input2"
            style="width: 240px"
            placeholder="实付金额"
        />

        </div>
      <div style="margin-bottom: 20px;">
        <span class="spanLevel1" >本单欠款:</span>
        <el-input
            v-model="input1"
            style="width: 240px"
            placeholder="本单欠款"
            disabled
        />
      </div>
    </div>
  </el-card>
</template>

<script  setup>
import { ref,  } from 'vue';
import { ElButton, ElDialog, ElCard, ElInput } from 'element-plus';
//分页
const currentPage2 = ref(1)
const pageSize2 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (number) => {
  console.log(`${number} items per page`)
}
const handleCurrentChange = (number) => {
  console.log(`current page: ${number}`)
}
// 插入商品


let dialogVisible = ref(false);

const ware = ref({
  wareName: '',
  wareCode: '',
  wareCont: '',
  wareConttel: '',
  wareAddress: '',
  wareMark: '',

});

const submitWare = () => {
  console.log(ware.value);
  dialogVisible.value = false;

};
// 编辑删除操作
const edit =(c)=>{
  console.log(c.prod_id)
  // router.push('/personal/post?id='+c.prod_id);
}

const del = (i,c)=>{
  console.log(i,c.prod_id)
  // if(confirm('您确认要删除此内容吗?')){
  //   axios.post('http://localhost:8080/v1/contents/'+c.prod_id+'/delete')
  //       .then((response)=>{
  //         if(response.data.code==2001){
  //           tableData.splice(i,1);
  //           ElMessage.success('删除内容成功!');
  //         }
  //       })
  // }
}
// 模拟表格数据
const tableData = [
  {
    wareId: '1',
    wareName: '商品1',
    wareCode: 'PR10000',
    wareCont: '黑色',
    wareConttel: '架',
    wareAddress:'武汉',
    wareMark:'工作时间9-18点'
  },
  {
    wareId: '2',
    wareName: '商品仓库',
    wareCode: 'PR20000',
    wareCont: '蓝色',
    wareConttel: '个',
    wareAddress:'重庆',
    wareMark:'工作时间21-12点'
  }
]
// 选择模块
const selectedRowIds = ref([]); // 用于记录选中的行的ID数组
const allSelected = ref(false); // 是否全选
const handleAllSelect = () => {
  if (allSelected.value) {
    // 全选操作用prod_id来指定，遍历tabledata每一个元素返回一个新数组包含所有prod_id
    //selectedRowIds.value是记录表格每一行数据的prod_id数组作用在单选框上，将来用于导出
    selectedRowIds.value = tableData.map(row => row.prod_id);
  } else {
    // 取消全选操作
    selectedRowIds.value = [];
  }
};
const input1 = ref(''); // 输入框绑定的数据

</script>

<style scoped>
/*分页*/
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
/*样式*/
.button-container {
  display: flex;
  justify-content: left;
}
/*插入商品row*/
.page1row{
  margin: 20px;
}
.spanLevel1{
  font-size: 15px;
  width: 120px;
  margin-right: 9px;
}
.titleLevel1{
  font-weight: bold;
  margin-bottom: 25px;
  margin-left: 70px ;
}
.input-container {
  width: 310px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

</style>
